<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	template="./../template.xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">
	
	<ui:define name="tituloJanela">
		<title>Cadastrar Novo Problema</title>
	</ui:define>

	<ui:define name="tituloCima">
		<h1>Cadastrar Novo Problema</h1>
	</ui:define>
	
	<ui:define name="conteudo">
		<h:form id="tabelaForm">
			<p:messages></p:messages>
			<p:panel header="Cadastrar Problema">
			<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
			
				<h:outputLabel value="Descrição: "/>					
				<p:inputText value="#{problemaMB.problema.descricao}" required="true" 
					requiredMessage="Entre com a descrição do problema." size="35"/>
				
				<h:outputLabel value="Categoria: "/>
				<p:selectOneMenu value="#{problemaMB.categoriaProblema}" effect="fade" required="true"
		        	requiredMessage="Selecione a categoria para o problema." style="width: 358px;">  
		            <f:selectItem itemLabel="Selecionar" itemValue=""/>  
		            <f:selectItems value="#{categoriaProblemaMB.categoriaProblemaItens}"/>
		        </p:selectOneMenu>
		        <p:spacer  rendered="#{problemaMB.isEdicao()}"/>
				<p:inputText value="#{problemaMB.nomeCategoriaProblema}" disabled="true" rendered="#{problemaMB.isEdicao()}"/>
		        </h:panelGrid>
		        
		        <h:outputLabel value="Lista Soluções"/>
		        <p:dataTable id="solucoes" value="#{problemaMB.solucoesProblema}" var="solucao" itemType="circle">
		        <p:column>
		        	<f:facet name="header">Solução:</f:facet>
		        	<h:outputLabel value="#{solucao.nome}"/>	
				</p:column>
				<p:column>
					<f:facet name="header">Remover</f:facet>
					<div style="text-align: center;">
						<p:commandButton title="Remover" action="#{problemaMB.removeSolucao}" ajax="false" update=":solucoes" icon="ui-icon-trash">
							<f:setPropertyActionListener target="#{problemaMB.solucaoSelecionada}" value="#{solucao}"/>
						</p:commandButton>
					</div>
				</p:column>
				</p:dataTable>
				
		        <h:panelGrid columns="3" style="margin-bottom:10px" cellpadding="5">
		        <h:outputLabel value="Solução: "/>
				<p:selectOneMenu value="#{problemaMB.solucaoProblema}" effect="fade" required="false"
		        	requiredMessage="Selecione a solução para o problema." style="width: 200px;">  
		            <f:selectItem itemLabel="Selecionar" itemValue=""/>  
		            <f:selectItems value="#{solucaoProblemaMB.solucaoProblemaItens}"/>
		        </p:selectOneMenu>
		        <p:commandLink action="#{problemaMB.adicionaSolucaoAdmin}" value="Adiciona Solução" ajax="true" update="solucoes"/>
					
			</h:panelGrid>
		    </p:panel>	        	
			<br/>
			<p:commandButton action="#{problemaMB.adicionaProblema}" value="Salvar" update=":tabelaForm" ajax="false"/>
		</h:form>
	</ui:define>
</ui:composition>